<template>
  <div class="hello">
    <h1 style="padding-top: 20px; font-weight: 600">部装排序工作台</h1>
    <div class="ku_wei">
      <div class="ku_fixed">
        <caption class="cap">
          库位
        </caption>
        <table>
          <tr v-for="i in trRow" :key="i">
            <td
              v-for="t in tdRow"
              :key="t"
              style="width: 90px; height: 90px"
              :class="{
                info: true,
                active: orderWarehouseList[i - 1][t - 1].isWork,
              }"
            >
              {{ reId(i, t) }}
            </td>
          </tr>
        </table>
        <div style="position: absolute; right: -32px; bottom: 0">
          <a-dropdown-button>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon
                  type="delete"
                  theme="twoTone"
                  two-tone-color="#ff4d4f"
                />清空
              </a-menu-item>
              <a-menu-item key="2"
                ><a-icon
                  type="check-circle"
                  theme="twoTone"
                  two-tone-color="#40a9ff"
                />完成
              </a-menu-item>
            </a-menu>
            <a-icon slot="icon" type="setting" />
          </a-dropdown-button>
        </div>
      </div>
      <div class="ku_fixed">
        <caption class="cap">
          库位
        </caption>
        <table>
          <tr v-for="i in trRow" :key="i">
            <td
              v-for="t in tdRow"
              style="width: 90px; height: 90px"
              :key="t"
              :class="{
                info: true,
                active: orderWarehouseList[i - 1][t - 1].isWork,
              }"
            >
              {{ reId(i, t) }}
            </td>
          </tr>
        </table>
        <div style="position: absolute; right: -32px; bottom: 0">
          <a-dropdown-button>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item key="1">
                <a-icon
                  type="delete"
                  theme="twoTone"
                  two-tone-color="#ff4d4f"
                />清空
              </a-menu-item>
              <a-menu-item key="2"
                ><a-icon
                  type="check-circle"
                  theme="twoTone"
                  two-tone-color="#40a9ff"
                />完成
              </a-menu-item>
            </a-menu>
            <a-icon slot="icon" type="setting" />
          </a-dropdown-button>
        </div>
      </div>
    </div>
    <div class="qi_ju">
      <div style="background-color: #ececec; padding: 20px">
        <a-checkbox-group @change="onChange" style="width: 100%">
          <a-row :gutter="16">
            <a-col :span="8">
              <a-checkbox value="A">
                <a-card title="器具1" :bordered="true">
                  <p>物料：轮胎</p>
                  <p>数量：8</p>
                  <p>拉动条码：DSGHJ7847832</p>
                </a-card>
              </a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="B">
                <a-card title="器具2" :bordered="true">
                  <p>物料：轮胎</p>
                  <p>数量：8</p>
                  <p>拉动条码：DSGHJ7847832</p>
                </a-card>
              </a-checkbox>
            </a-col>
            <a-col :span="8">
              <a-checkbox value="C">
                <a-card title="器具3" :bordered="true">
                  <p>物料：轮胎</p>
                  <p>数量：8</p>
                  <p>拉动条码：DSGHJ784783hfjkahkdfjhask2</p>
                </a-card>
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </div>
    </div>
    <div class="btn-group">
      <!-- <a-button-group> -->
      <a-button @click="showDrawer"> 任务列表 </a-button>
      <a-button type="dashed"> AB换面 </a-button>
      <a-button type="primary"> 开始 </a-button>
      <a-button type="danger">退空</a-button>
      <a-button @click="showDrawerS">操作列表</a-button>
      <!-- </a-button-group> -->
    </div>
    <a-drawer
      title="任务列表"
      :placement="placement"
      closable
      :visible="visible"
      @close="onClose"
      width="100%"
    >
      <a-table :columns="columns" :data-source="data">
        <a slot="KeyFlag" slot-scope="KeyFlag">{{ KeyFlag ? "是" : "否" }}</a>
      </a-table>
    </a-drawer>
    <a-drawer
      title="操作记录"
      :placement="placementS"
      closable
      :visible="visibleS"
      @close="onClose"
      width="100%"
    >
      <a-table :columns="columnsS" :data-source="dataS">
        <a slot="KeyFlag" slot-scope="KeyFlag">{{ KeyFlag ? "是" : "否" }}</a>
      </a-table>
    </a-drawer>
    <div class="menu">
      <a-button type="primary" @click="showModal"> 产线|工位 </a-button>
      <!-- <a-dropdown>
        <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
          工位 <a-icon type="down" />
        </a>
        <a-menu slot="overlay" @click="onClick">
          <a-menu-item key="1"> 工位1 </a-menu-item>
          <a-menu-item key="2"> 工位2 </a-menu-item>
          <a-menu-item key="3"> 工位3 </a-menu-item>
        </a-menu>
      </a-dropdown> -->
    </div>
    <a-modal
      v-model="modalVisible"
      title="选择产业/工位"
      @ok="handleOk"
      ok-text="确认"
      cancel-text="取消"
    >
      <a-row>
        <a-col :span="12" style="border-right: 1px solid #d9d9d9">
          <a-radio-group v-model="value" @change="onChange">
            <a-row
              ><a-radio :style="radioStyle" :value="1"> 产业 A </a-radio></a-row
            >
            <a-row
              ><a-radio :style="radioStyle" :value="2"> 产业 B </a-radio></a-row
            >
            <a-row
              ><a-radio :style="radioStyle" :value="3"> 产业 C </a-radio></a-row
            >
          </a-radio-group>
        </a-col>
        <a-col :span="12" style="padding-left: 15px">
          <a-radio-group v-model="value1" @change="onChange">
            <a-row
              ><a-radio :style="radioStyle" :value="1"> 工位 A </a-radio></a-row
            >
            <a-row
              ><a-radio :style="radioStyle" :value="2"> 工位 B </a-radio></a-row
            >
            <a-row
              ><a-radio :style="radioStyle" :value="3"> 工位 C </a-radio></a-row
            >
          </a-radio-group>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script>
const columns = [
  {
    title: "生产计划顺序",
    dataIndex: "ProductOrder",
    key: "ProductOrder",
  },
  {
    title: "发动机序列号",
    dataIndex: "ProductCode",
    key: "ProductCode",
  },
  {
    title: "机型",
    dataIndex: "Model",
    key: "Model",
  },
  {
    title: "工单编码",
    dataIndex: "OrderNo",
    key: "OrderNo",
  },
  {
    title: "物料编码",
    dataIndex: "SkuId",
    key: "SkuId",
  },
  {
    title: "数量",
    dataIndex: "Qty",
    key: "Qty",
  },
  {
    title: "是否关键件",
    dataIndex: "KeyFlag",
    key: "KeyFlag",
    scopedSlots: { customRender: "KeyFlag" },
  },
  {
    title: "BOM",
    dataIndex: "BOMID",
    key: "BOMID",
  },
];
const columnsS = [
  {
    title: "生产计划顺序",
    dataIndex: "ProductOrder",
    key: "ProductOrder",
  },
  {
    title: "发动机序列号",
    dataIndex: "ProductCode",
    key: "ProductCode",
  },
  {
    title: "物料编码",
    dataIndex: "SkuId",
    key: "SkuId",
  },
  {
    title: "数量",
    dataIndex: "Qty",
    key: "Qty",
  },
  {
    title: "是否关键件",
    dataIndex: "KeyFlag",
    key: "KeyFlag",
    scopedSlots: { customRender: "KeyFlag" },
  },
  {
    title: "完成时间",
    dataIndex: "completed_timestamp",
    key: "completed_timestamp",
  },
];

const data = [
  {
    key: "1",
    ProductOrder: "123",
    ProductCode: "9922G000243",
    Model: "柴油机",
    OrderNo: "5221052206000018",
    SkuId: "物料编码",
    Qty: "2",
    KeyFlag: true,
    BOMID: "11000656073",
  },
];
const dataS = [
  {
    key: "1",
    ProductOrder: "123",
    ProductCode: "9922G000243",
    SkuId: "物料编码",
    Qty: "2",
    KeyFlag: false,
    completed_timestamp: "2022/8/8 11:00:00",
  },
];
export default {
  name: "HelloWorld",
  // components: {
  //   UserOutlined,
  // },
  props: {
    msg: String,
  },
  // computed: {

  // },
  data: () => {
    return {
      data,
      columns,
      dataS,
      columnsS,
      trRow: 4,
      tdRow: 4,
      orderWarehouseList: [
        [
          { id: "1-1", isWork: true },
          { id: "1-2", isWork: false },
          { id: "1-3", isWork: false },
          { id: "1-4", isWork: false },
        ],
        [
          { id: "2-1", isWork: true },
          { id: "2-2", isWork: false },
          { id: "2-3", isWork: false },
          { id: "2-4", isWork: false },
        ],
        [
          { id: "3-1", isWork: true },
          { id: "3-2", isWork: false },
          { id: "3-3", isWork: true },
          { id: "3-4", isWork: false },
        ],
        [
          { id: "4-1", isWork: true },
          { id: "4-2", isWork: false },
          { id: "4-3", isWork: false },
          { id: "4-4", isWork: false },
        ],
      ],
      modalVisible: false,
      visible: false,
      placement: "left",
      visibleS: false,
      placementS: "right",
    };
  },
  methods: {
    reId(row, col) {
      // console.log(
      //   "row, col",
      //   row,
      //   col,
      //   this.orderWarehouseList[row - 1][col - 1].id
      // );
      return this.orderWarehouseList[row - 1][col - 1].id;
    },
    handleMenuClick(a, b) {
      console.log("a,b", a, b);
      this.orderWarehouseList = this.orderWarehouseList.map((M) => {
        return M.map((m) => ({ ...m, id: "", isWork: false }));
      });
    },
    showModal() {
      this.modalVisible = true;
    },
    showDrawer() {
      this.visible = true;
    },
    showDrawerS() {
      this.visibleS = true;
    },
    handleOk(e) {
      console.log(e);
      this.modalVisible = false;
    },
    onClose() {
      this.visible = false;
      this.visibleS = false;
    },
    onChange(e) {
      this.placement = e.target.value;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.ku_wei {
  margin: auto;
  width: 80%;
  display: flex;
  justify-content: space-around;
}
.cap {
  display: inline-block;
  color: #000;
  /* font-size: 0.2rem; */
  font-size: 20px;
  padding-top: 0;
}
.ku_fixed {
  position: relative;
}

.btn-group {
  width: 40%;
  margin: auto;
  display: flex;
  justify-content: space-between;
}
.qi_ju {
  margin-top: 30px;
}
table {
  border-collapse: collapse;
}
table,
td,
th {
  /* border: 1px solid #f0f0f0; */
  border: 1px solid #d9d9d9;
}
td {
  /* padding: 35px; */
}

.info {
  background: #f5f5f5;
}
.active {
  background: #40a9ff;
}
.ku_wei /deep/ .ant-btn-group > .ant-btn:first-child:not(:last-child) {
  display: none !important;
}
/deep/ .ant-card {
  width: 100%;
  /* background: pink; */
}
/deep/ .ant-checkbox-wrapper {
  position: relative;
  /* border: 1px solid red; */
  display: block;
  margin: 0 10px;
}
/deep/ .ant-checkbox {
  position: absolute;
  left: -22px;
  top: 22px;
}
.btn-group {
  padding: 30px 0;
}
.menu {
  position: fixed;
  top: 20px;
  right: 60px;
}
</style>
